<template>
	<view class="tree-select">
		<view class="side">
			<view :class="['side-item',index===selectedIndex?'selected-side_item':'']" v-for="(item,index) in list" @click="clickSideItem(index)">
				{{item.name}}
			</view>
		</view>
		<scroll-view class="content" :scroll-y="true">
			<view :class="['content-item',selectedId.startsWith(item.id)?'selected-content_item':'']" v-for="item in selectedList" @click="clickTargetItem(item)">
				<text>{{item.name}}</text>
				<u-icon name="checkbox-mark" color="#EE0A24" v-show="item.id===selectedId"></u-icon>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,computed,unref
	} from "vue"
	const props = defineProps({
		// 左侧栏的索引
		selectedIndex:{
			type:Number,
			default:0
		},
		// 右侧的id
		selectedId:{
			type:String,
		},
		// 传过来的列表
		list: {
			type: Array,
			default: () => []
		}
	})
	const emits = defineEmits(["update:selectedIndex","confirm"])
	// 右侧显示的内容
	const selectedList = computed(()=>props.list.length?props.list[props.selectedIndex].children:[])
	function clickSideItem(index){
		emits("update:selectedIndex",index)
	}
	
	async function clickTargetItem({id}){
		if(id==props.selectedId) return
		emits("confirm",id)
		
	}
	
	
</script>
<style lang="scss" scoped>
	.tree-select{
		display:flex;
		box-sizing:border-box;
		height:37vh;
		.side{
			background-color:#F7F8FA;
			font-size:30rpx;
			
			.side-item{
				padding:30rpx 0 30rpx 30rpx;
				width:230rpx;
				
			}
			.selected-side_item{
				background-color:white;
			}
		}
		.content{
			flex:1;
			padding-right: 10rpx;
			.content-item{
				padding:10rpx 20rpx;
				display:flex;
				justify-content:space-between;
				
			}
			.selected-content_item{
				color:#EE0A24;
			}
			
		}
	}
</style>